HTML - tags - video tag

revision:


Content

"video" tag : embed video content in a document syntax some examples


"video" tag : embed video content in a document

top

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
The text between the "video" and "/video" tags will only be displayed in browsers that do not support the "video" element. There are three supported video formats in HTML: MP4, WebM, and OGG.

Attributes: the <video> element supports the global attributes and events attributes. OptionaL attrIbutes are:

autoplay ; value: autoplay;

specifies that the video will start playing as soon as it is ready.

controls ; value: controls;

specifies that video controls should be displayed (such as a play/pause button etc).

height ; value: pixels;

sets the height of the video player.

loop ; value:loop;

specifies that the video will start over again, every time it is finished.

muted ; value: muted;

specifies that the audio output of the video should be muted.

poster ; value: URL;

specifies an image to be shown while the video is downloading, or until the user hits the play button.

preload ; value: auto, metadata, none;

specifies if and how the author thinks the video should be loaded when the page loads.

src ; value: URL;

specifies the URL of the video file.

width ; value: pixels:

sets the width of the video player.


syntax

top

<video> . . . </video>


some examples

top
Codes:
                    <video style="margin-left:4vw;" width="320" height="240" controls>
                        <source src="../../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
                        <source src="../../pics/Wuzhen-20-10_02.ogg" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                
Codes:
                    <video style="margin-left:4vw;" width="320" height="240" controls autoplay loop>
                        <source src="../../pics/Wuzhen-20-10_02.mp4" type="video/mp4"/>
                    </video>